<template>
  <div class="c-w100" :class="voteMb == 3 ? 'mb3-index-bgColor c-pb4' : ''">
    <div class="c-w100" v-if="isOnlineEnroll == 1">
      <audio id="audio" @ended="playAudioEnd" class="c-pf c-p-l-100"></audio>
      <div class="c-w100 maxh340">
        <img :src="$addXossFilter(info.cover, require('@/assets/activity_defult.png'))" alt="" class="c-w100 maxh340">
      </div>
      <div class="c-ph24 c-pb36">
        <div class="c-fs28 c-fw-b c-pt36" :class="voteMb == 3 ? 'c-fc-white' : ''">{{info.name}}</div>
        <div class="c-pt36 c-fs24" :class="voteMb == 3 ? 'c-fc-white' : 'c-fc-gray'">比赛时间：{{info.startAt}} — {{info.endAt}}</div>
        <div class="c-pt16 c-fs24" :class="voteMb == 3 ? 'c-fc-white' : 'c-fc-gray'">报名时间：{{info.enrollStartAt}} — {{info.enrollEndAt}}</div>
        <div class="c-pt16 c-fs24" v-if="info.enrollRequirement" :class="voteMb == 3 ? 'c-fc-white' : 'c-fc-gray'">报名要求：{{info.enrollRequirement}}</div>
      </div>
      <div :class="voteMb == 2 ? 'c-ph12 c-bg-white c-p c-mb30' : voteMb == 3 ? 'c-ph12' : ''">
        <div v-if="voteMb == 2" class="c-pa" style="left:0.3rem;right:0.3rem;top:-0.9rem;">
          <img src="../../../assets/i/wap/voting/bgTop.png" alt="">
        </div>
        <div class="c-br-tl16 c-br-tr16 c-fs20 c-fc-sblack c-ph24"
          :class="voteMb == 2 ? 'c-mt36 c-pt6 mb2-center-bg' : voteMb == 3 ? 'c-br-bl16 c-br-br16 c-bg-white c-pb60 c-pt34' : 'c-bg-white inp-shaw c-pt34 c-pb120'">
          <div class="">
            <div><span class="c-fc-mred">*&nbsp;</span>选手名称</div>
            <div class="c-bd-b1-mgray c-pt20 c-pb24">
              <input type="text" name="" maxlength="16" id="" class="c-bd0 c-w100 c-fs24" v-model="playerName" placeholder="请输入选手名称">
            </div>
          </div>
          <div class="c-mt28">
            <div><span class="c-fc-mred">*&nbsp;</span>选手简介</div>
            <div class="c-bd-b1-mgray c-pt20 c-pb24">
              <textarea type="text" maxlength="1000" ref="test" rows="1" class="c-bd0 c-w100 c-fs24" v-model="playerDetail" placeholder="请输入选手简介" @focus="inputFocus" @blur.prevent="inputBlur"></textarea>
            </div>
          </div>
          <div class="c-mt28">
            <div><span class="c-fc-mred" v-if="info.telType == 1">*&nbsp;</span>报名手机号</div>
            <div class="c-bd-b1-mgray c-pt20 c-pb24">
              <input type="text" name="" id="" maxlength="11" class="c-bd0 c-w100 c-fs24" v-model="playerPhone" placeholder="手机号保密状态,仅供与主办方联系" @focus="inputFocus" @blur.prevent="inputBlur"/>
            </div>
          </div>
          <div v-if="info.textType != -1" class="c-mt28">
            <div><span class="c-fc-mred" v-if="info.textType == 1">*&nbsp;</span>上传文字作品</div>
            <div class="c-bd-b1-mgray c-pt20 c-pb24">
              <textarea type="text" maxlength="10000" ref="article" rows="1" class="c-bd0 c-w100 c-fs24" v-model="article" placeholder="请输入文字" @focus="inputFocus" @blur.prevent="inputBlur"></textarea>
              <!-- <input type="text" name="" id="" maxlength="10000" class="c-bd0 c-w100 c-fs24" v-model="article" placeholder="请输入文字" @focus="inputFocus" @blur.prevent="inputBlur"/> -->
            </div>
          </div>
          <div class="c-mt28 c-pb28 c-bd-b1-mgray">
            <div><span class="c-fc-mred">*&nbsp;</span>上传图片作品</div>
            <div class="c-flex-row c-flexw-wrap c-flex-grow1 c-flex-shrink0">
              <div class="c-p c-ww180 c-hh120 c-br10 c-flex-column c-aligni-center mt26" :class="(index+1)%3 == 0 ? '' : 'c-mr20'" v-for="(item, index) in uploadImgList" :key="index">
                <img @click="clickPreviewImage(item.content)" :src="$addXossFilter(item.content, require('@/assets/defult270.png'))" class="c-ww180 c-hh120 c-br10" />
                <i class="c-pa closeC c-fs32 iconfont c-fc-sgray" alt="" @click="delUploadImage(index)">&#xe6ec;</i>
              </div>
              <div class="c-p" v-if="uploadImgList.length <= info.imageNum">
                <div class="c-ww180 c-hh120 c-bd1-e6 c-br10 c-flex-column c-aligni-center mt26" @click="clickAddPic">
                  <span class="c-fs60 c-fc-sgray c-lh72">+</span>
                  <span class="c-fs20 c-fc-gray upload-lh">添加图片</span>
                </div>
                <input class="c-pa c-opacity0 c-p-t32 c-p-l0 c-ww180 c-hh120 c-fs10" v-if="!isWeiXin" ref="uploadImg" name="file" type="file" accept="image/*" @change="clickAddPic($event)" />
              </div>
            </div>
          </div>
          <div class="c-mt28 c-pb28 c-bd-b1-mgray" v-if="info.videoType != -1">
            <div><span class="c-fc-mred" v-if="info.videoType == 1">*&nbsp;</span>上传视频作品</div>
            <div class="c-pt26" v-if="uploadVideoList.length > 0">
              <div class="c-p c-ww180 c-hh120 c-br10" v-for="(item,index) in uploadVideoList" :key="index">
                <div @click="clickShowVideo(item.realUrl)" class="c-ww180 c-hh120 c-br10">
                  <img class="c-w100 c-br10" src="https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/clockIn/video-bg1.png" alt="" />
                </div>
                <i @click="clickDelVideo(index)" class="iconfont c-fs32 c-fc-sgray closeC c-pa">&#xe6ec;</i>
              </div>
            </div>
            <div class="c-ww180 c-hh120 c-bd1-e6 c-br10 c-flex-column c-aligni-center mt26" @click="clickUploadVideo" v-if="uploadVideoList.length == 0">
              <span class="c-fs60 c-fc-sgray c-lh72">+</span>
              <span class="c-fs20 c-fc-gray upload-lh">添加视频</span>
            </div>
          </div>
          <div class="c-mt28" v-if="info.audioType != -1">
            <div><span class="c-fc-mred" v-if="info.audioType == 1">*&nbsp;</span>上传音频作品</div>
            <div class="c-mt56 c-p" v-if="playAduioSrc != ''">
              <voice-player :playAduioSrc="playAduioSrc" :allTime="allTime" @audioCanplay="audioCanplay"></voice-player>
              <i @click="clickDelAudio" class="iconfont c-fs32 c-fc-sgray closeA c-pa">&#xe6ec;</i>
            </div>
            <div class="c-ww180 c-hh120 c-bd1-e6 c-br10 c-flex-column c-aligni-center mt26" @click="clickAddAudio" v-if="playAduioSrc == ''">
              <span class="c-fs60 c-fc-sgray c-lh72">+</span>
              <span class="c-fs20 c-fc-gray upload-lh">添加音频</span>
            </div>
          </div>
          <div class="c-fs28 c-textAlign-c c-fc-white mb2-btnBg" @click="cliskSubmitVote" v-if="voteMb == 2">提交报名</div>
        </div>
        <div v-if="voteMb == 2">
          <img src="../../../assets/i/wap/voting/bgBottom.png" alt="">
        </div>
      </div>
      <div class="c-fs28 c-textAlign-c c-maxw640" :class="voteMb == 3 ? 'mb3-btnBg c-hh80 c-mv40 c-lh80 fc844813' : 'theme-fc c-pf c-p-b0 c-w100 c-bg-white c-pv30 c-box-shadow5'" @click="cliskSubmitVote"
        v-if="voteMb != 2 && isShowBtn">提交报名</div>
      <input class="hide c-cursor-p needsclick" id="myUpload" type="file" accept="video/*" @change='onInputChange($event)' />
      <input class="hide c-cursor-p needsclick" id="myUploadAudio" type="file" accept="audio/mp3, audio/ogg, audio/aac" @change='onAudioInputChange($event)' />
      <clock-audio-record :showAudioRecordModal='showAudioRecordModal' @closeAudioRecordModal='closeAudioRecordModal' @uploadAudioSuccess='uploadAudioSuccess'></clock-audio-record>
      <!-- 视频播放器 -->
      <video-popup :showVideo="showVideo" @clickCloseVideo="clickCloseVideo" :videoSrc="currentVideoObj.videoSrc" :m3u8Url="currentVideoObj.m3u8Url"></video-popup>
      <my-loading :showLoading="showProgress" :text="uploadProgress"></my-loading>
    </div>
    <div v-if="isOnlineEnroll == 0" class="c-mt80">
      <img src="../../../assets/i/wap/voting/noData.png" alt="" class="c-m-0auto c-ww240 c-hh170">
      <div class="c-textAlign-c c-fs24 c-fc-sblack c-mt20">报名已结束</div>
    </div>
    <open-modal
      :openModal="audioOpenModal"
      @closeModal="audioOpenModal = false"
      :isOpenDisabledScroll="false"
    >
      <div class="c-bg-white c-br-tl20 c-br-tr20 c-text-hidden">
        <div class="c-fs26 c-fc-xblack c-hh88 c-flex-row c-flex-center c-bd-b1" @click="wxRecord">开始录音</div>
        <div class="c-fs26 c-fc-xblack c-hh88 c-flex-row c-flex-center c-bd-b1" @click="clickLocalAudio">上传音频</div>
        <div class="c-hh12 c-bg-sgray"></div>
        <div @click="audioOpenModal = false" class="c-fs26 c-fc-xblack c-hh88 c-flex-row c-flex-center">取消</div>
      </div>
    </open-modal>
  </div>
</template>

<script>
let inputScrollTop = 0;
import TcVod from "vod-js-sdk-v6";
import { utilJs, wxUtilJs } from "@/utils/common.js";
import myLoading from "@/plugin/loading/loading.vue";
import clockAudioRecord from "@/components/templates/clockIn/clockAudioRecord.vue";
import voicePlayer from "@/components/templates/common/audio/voicePlayer.vue";
import videoPopup from "@/components/templates/common/videoPopup.vue";
import openModal from "@/components/templates/common/openModal.vue";
let isLoading = false;
let serverIdImgArr = [];
let uploader = null;
export default {
  name: "playerSingUp",
  components: {
    myLoading,
    clockAudioRecord,
    voicePlayer,
    videoPopup,
    openModal
  },
  data() {
    return {
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : "mb5_default",
      voteId: '',
      fromPage: 0,
      info: {},
      isWeiXin: true,
      playerName: '',
      playerDetail: '',
      playerPhone: '',
      imgData: '',
      uploadImgList: [],
      showProgress: false,
      uploadVideoList: [],
      uploadProgress: '0',
      showVideo: false,
      showAudioRecordModal: false,
      allTime: 0,
      isOnlineEnroll: 2,
      playerId: 0,
      voteMb: 1,
      playAduioSrc: "", // 播放音频的src
      currentVideoObj: {},
      isShowBtn: true, // 为了控制安卓手机悬浮底部按钮被顶起下滑不下去
      article: '',
      oldLink: '',
      audioOpenModal: false,
      audioObj: null
    }
  },
  created() {
    utilJs.appShare(this);
  },
  mounted() {
  },
  watch: {
    playerDetail(newV, oldV) {
      if (newV == oldV) {
        return
      }
      this.playerDetail = newV
      this.changeHeight()
    },
    article(newV, oldV) {
      if (newV == oldV) {
        return
      }
      this.article = newV
      this.changeArticleHeight()
    },
  },
  methods: {
    //IOS微信6.7以上版本会导致输入法收起的时候，键盘没收起，需要手动滚下屏幕
    inputFocus() {
      inputScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      if (utilJs.isAdnroidBrower()) {
        this.isShowBtn = false;
      }
    },
    inputBlur() {
      this.isShowBtn = true;
      setTimeout(() => {
        document.body.scrollTop = inputScrollTop - 1 || 0;
      });
    },
    audioCanplay(audioDuration) {
      this.allTime = audioDuration;
    },
    changeHeight() {
      let _this = this
      this.$nextTick(() => {
        var textArea = _this.$refs.test
        var scrollHeight = textArea.scrollHeight // 控件所有的高度
        var height = textArea.offsetHeight // 屏幕上显示的高度
        if (height <= scrollHeight) {
          textArea.style.height = 'auto' // 恢复默认值，根据内容自适应textarea高度
          textArea.style.height = textArea.scrollHeight + 'px' // 拿到最新的高度改变textarea的高度
        }
      })
    },
    changeArticleHeight() {
      let _this = this
      this.$nextTick(() => {
        var articleArea = _this.$refs.article;
        var scrollHeight = articleArea.scrollHeight // 控件所有的高度
        var height = articleArea.offsetHeight // 屏幕上显示的高度
        if (height <= scrollHeight) {
          articleArea.style.height = 'auto' // 恢复默认值，根据内容自适应textarea高度
          articleArea.style.height = articleArea.scrollHeight + 'px' // 拿到最新的高度改变textarea的高度
        }
      })
    },
    // 提交报名
    cliskSubmitVote() {
      if (isLoading) {
        return
      }
      if (this.playerName.trim() == '') {
        this.$showCjToast({
          text: "请填写选手名称",
          type: "warn"
        })
        return
      }
      if (this.playerDetail.trim() == '') {
        this.$showCjToast({
          text: "请填写选手简介",
          type: "warn"
        })
        return
      }
      if (this.playerPhone.trim() == '' && this.info.telType == 1) {
        if (utilJs.isPhoneNumber(this.playerPhone)) {
          this.$showCjToast({
            text: "请填写正确手机号",
            type: "warn"
          })
          return
        }
        this.$showCjToast({
          text: "请填写手机号",
          type: "warn"
        })
        return
      }
      if (this.article.length > 10000) {
        this.$showCjToast({
          text: "文字作品不能超过10000字",
          type: "warn"
        })
        return
      }
      if (this.article.trim() == '' && this.info.textType == 1) {
        this.$showCjToast({
          text: "请填写文字作品",
          type: "warn"
        })
        return
      }
      if (this.uploadImgList.length == 0) {
        this.$showCjToast({
          text: "请上传图片",
          type: "warn"
        });
        return
      }
      if (this.uploadVideoList.length == 0 && this.info.videoType == 1) {
        this.$showCjToast({
          text: "请上传视频",
          type: "warn"
        })
        return
      }
      if (this.playAduioSrc == '' && this.info.audioType == 1) {
        this.$showCjToast({
          text: "请上传音频",
          type: "warn"
        })
        return
      }
      isLoading = true
      let that = this
      let images = []
      this.uploadImgList.forEach((item, index) => {
        images.push(item.content)
      })
      let datas = {
        id: this.fromPage == 3 ? this.playerId : '',
        actId: this.voteId,
        name: this.playerName.trim(),
        introduce: this.playerDetail.trim(),
        tel: this.playerPhone.trim() || '',
        images: images,
        audioDuration: this.allTime.toString() || '',
        audioUrl: this.playAduioSrc || '',
        videoUrl: this.uploadVideoList.length > 0 ? this.uploadVideoList[0].realUrl : '',
        videoFileId: this.uploadVideoList.length > 0 ? this.uploadVideoList[0].url : ''
      }
      if (this.audioObj) {
        datas.audioName = this.audioObj.audioName;
      }
      if (this.article.trim() != '' && this.info.textType != -1) {
        datas.textualWork = [{
          type: 1,
          content: '<p>' + this.article.trim() + '</p>',
          title: this.oldLink
        }]
      }
      let url = `${global.apiurl}activity/vote/submitEnroll`
      utilJs.postMethod(url, datas, (res) => {
        isLoading = false
        this.$showCjToast({
          text: "报名成功",
          type: "success",
        }).then(() => {
          that.$routerGo(that, "replace", {
            path: "/homePage/voting/contestantDetail",
            query: {
              id: res.playerId,
              //refereeId: localStorage.getItem("userId")
            }
          })
        });
      }, err => {
        console.log(err)
        this.$showCjToast({
          text: "报名失败",
          type: "error",
        });
        isLoading = false
      })
    },
    //活动详情
    getVoteDetail() {
      let url = `${global.apiurl}activity/vote/activityDetail/${this.voteId}?type=1`
      utilJs.getMethod(url, res => {
        //setDocumentTitle(res.name);
        this.info = res
        this.playerName = res.nickname
        this.isOnlineEnroll = res.isOnlineEnroll
        let startTime = this.info.startAt.replace(/-/g, "/").split(':')
        let endTime = this.info.endAt.replace(/-/g, "/").split(':')
        let enrollStartTime = this.info.enrollStartAt.replace(/-/g, "/").split(':')
        let enrollEndTime = this.info.enrollEndAt.replace(/-/g, "/").split(':')
        this.info.startAt = startTime[0] + ':' + startTime[1]
        this.info.endAt = endTime[0] + ':' + endTime[1]
        this.info.enrollStartAt = enrollStartTime[0] + ':' + enrollStartTime[1]
        this.info.enrollEndAt = enrollEndTime[0] + ':' + enrollEndTime[1]
        if (this.fromPage == 2 || this.fromPage == 3) {
          this.getPlayerDetail()
        }
        this.wechatShare()
      }, error => {
        console.log(error)
        this.isOnlineEnroll = 0
      })
    },
    //添加音频
    clickAddAudio() {
      this.audioOpenModal = true;
    },
    wxRecord() {
      this.audioOpenModal = false;
      this.playAduioSrc = "";
      document.getElementById("audio").src = this.playAduioSrc;
      this.showAudioRecordModal = true;
    },
    clickLocalAudio() {
      this.audioOpenModal = false;
      this.playAduioSrc = "";
      document.getElementById("audio").src = this.playAduioSrc;
      document.getElementById("myUploadAudio").click();
    },
    //关闭录音弹窗
    closeAudioRecordModal(state) {
      if (state == 1) {
        this.showAudioRecordModal = false;
      }
    },
    //音频上传成功
    uploadAudioSuccess(audioContent, state) {
      if (state == 1) {
        this.showAudioRecordModal = false;
      }
      /* let audioItem = {
        url: audioContent.content,
        time: audioContent.time
      }; */
      //this.uploadAudioList.push(audioItem);
      this.playAduioSrc = audioContent.content
      this.allTime = audioContent.time
    },
    clickDelAudio() {
      this.audioObj = null;
      this.playAduioSrc = ''
      this.allTime = 0
    },
    playAudioEnd() {
      console.log('end')
    },
    //点击显示视频
    clickShowVideo(videoSrc, m3u8Url) {
      this.showVideo = true;
      this.currentVideoObj = {videoSrc, m3u8Url}
    },
    //添加图片
    clickAddPic(event) {
      if (this.uploadImgList.length >= this.info.imageNum) {
        this.$showCjToast({
          text: `图片最多只能传${this.info.imageNum}张`,
          type: "warn",
        });
        return;
      };
      if (this.isWeiXin) {
        wxUtilJs.chooseImage({
          count: this.info.imageNum, // 默认9
          sizeType: ["compressed"], // 可以指定是原图还是压缩图，默认二者都有
          sourceType: ["album", "camera"] // 可以指定来源是相册还是相机，默认二者都有
        }).then(localIds => {
          this.$loading.show({
            text: "上传中..."
          });
          serverIdImgArr = [];
          //获取剩余能传多少张图片，若已选的图片数量大于剩余数。则只传剩余数量的图片
          let residueLength = this.info.imageNum - this.uploadImgList.length;
          if (localIds.length > residueLength) {
            localIds.length = residueLength;
          }
          this.wxUploadImg(localIds, localIds.length - 1);
        });
      } else {
        utilJs.imgUpload(event.target.files, this.imgData, 'vote', res => {
          let urlObj = {
            content: res
          };
          this.uploadImgList.push(urlObj);
        }, fRes => { });
      }
    },
    //上传图片到微信-----IOS不能一次性传多张，只好递归传
    wxUploadImg(localIds, localIdsLength) {
      wxUtilJs.uploadImage({ localId: localIds[localIdsLength] }, true)
        .then(res => {
          serverIdImgArr.push(res);
          if (localIdsLength > 0) {
            this.wxUploadImg(localIds, --localIdsLength);
          } else {
            this.syncUploadPic(serverIdImgArr);
          }
        });
    },
    //上传图片到服务器
    syncUploadPic(serverIdArr) {
      utilJs.postMethod(
        global.apiurl + "signCard/downWxImg ",
        {
          serverId: JSON.stringify(serverIdArr),
          mediaType: 2
        },
        res => {
          this.$loading.hide();
          for (let key of res) {
            if (this.uploadImgList.length >= this.info.imageNum) {
              break;
            }
            let urlObj = {
              content: key
            };
            this.uploadImgList.push(urlObj);
          }
        },
        failRes => {
          this.$loading.hide();
        }
      );
    },
    //点击图片放大预览
    clickPreviewImage(imgUrl) {
      if (!imgUrl) {
        return;
      }
      let imgArr = [];
      for (let key of this.uploadImgList) {
        imgArr.push(key.content);
      }
      wxUtilJs.previewImage({
        current: imgUrl, // 当前显示图片的http链接
        urls: imgArr // 需要预览的图片http链接列表
      });
    },
    //删除上传的图片
    delUploadImage(index) {
      this.uploadImgList.splice(index, 1);
    },
    //保存视频
    videoFirstSave(data) {
      utilJs.postMethod(
        global.apiurl + "signCard/videoFirstSave",
        data,
        (res) => { }
      );
    },
    // 删除视频
    clickDelVideo(index) {
      this.uploadVideoList.splice(index, 1);
    },
    //点击关闭视频
    clickCloseVideo() {
      if (this.showVideo) {
        this.showVideo = false;
      }
    },
    //点击上传视频
    clickUploadVideo() {
      document.getElementById("myUpload").click();
    },
    //获取得到的文件file
    onInputChange(e) {
      let inputFile = e.target.files[0];
      if (inputFile && inputFile.size > 1024 * 1024 * 500) {
        this.$showCjToast({
          text: "视频文件大小不能超过500M",
          type: "warn",
        });
        return false;
      }
      if (inputFile) {
        this.uploadVideoToTencent(inputFile, 1);
      }
    },
    onAudioInputChange(e) {
      let inputFile = e.target.files[0];
      if (inputFile && inputFile.size > 1024 * 1024 * 100) {
        this.$showCjToast({
          text: "音频文件大小不能超过100M",
          type: "warn",
        });
        return false;
      }
      if (inputFile) {
        this.audioOpenModal = false;
        this.uploadVideoToTencent(inputFile, 2);
      }
    },
    uploadVideoToTencent(inputFile, fileType) {
      let that = this;
      this.showProgress = true;
      const tcVod = new TcVod({
        // eslint-disable-line
        getSignature: utilJs.getVideoSign
      });
      uploader = tcVod.upload({
        mediaFile: inputFile // 媒体文件（视频或音频或图片），类型为 File
      });
      uploader.on("media_progress", function (info) {
        that.uploadProgress = `上传进度:${Math.floor(info.percent * 100)}%`;
      });
      uploader
        .done()
        .then(function (result) {
          that.showProgress = false;
          let videoInfo = {
            url: result.fileId,
            realUrl: result.video.url
          };
          if (fileType == 1) {
            that.uploadVideoList.push(videoInfo);
            let data = {
              videoId: result.fileId,
              videoMp4: result.video.url,
              videoName: inputFile.name
            };
            that.videoFirstSave(data);
            that.uploadProgress = '0';
            document.getElementById("myUpload").value = null;
          } else {
            that.audioObj = videoInfo;
            that.audioObj.audioName = inputFile.name;
            that.playAduioSrc = result.video.url;
            let data = {
              videoId: result.fileId,
              videoMp4: result.video.url,
              videoName: inputFile.name
            };
            that.videoFirstSave(data);
            that.uploadProgress = '0';
            document.getElementById("myUploadAudio").value = null;
          }
        })
        .catch((err) => {
          that.showProgress = false;
          that.$showCjToast({
            text: "上传失败，请尝试重新上传",
            type: "warn",
          });
          that.uploadProgress = '0';
          if (fileType == 1) {
            document.getElementById("myUpload").value = null;
          } else {
            document.getElementById("myUploadAudio").value = null;
          }
          let errorData = {
            errorMsg: JSON.stringify(err),
            errorType: "UPLOAD_VIDEO_ERROR"
          };
          utilJs.reprotError(errorData);
        });
    },
    // 重新报名
    getPlayerDetail() {
      let url = `${global.apiurl}activity/vote/reEnroll/${this.voteId}`
      utilJs.getMethod(url, res => {
        this.playerName = res.name //选手名称
        this.playerDetail = res.introduce //选手简介
        this.playerPhone = res.tel //手机号
        if (res.textualWork && JSON.stringify(res.textualWork) != '[]') {
          this.oldLink = res.textualWork[0].title;
          utilJs.getPageHtml(res.textualWork[0].content, sres => {
            let articleText = sres.replaceAll('<p>', '');
            this.article = articleText.replaceAll('</p>', '');
          }, () => {
            this.article = '';
          });
        }
        if (res.images.length > 0) {
          res.images.forEach((eleImg) => {
            let urlObj = {
              content: eleImg
            };
            this.uploadImgList.push(urlObj) //图片列表
          })
        }
        if (res.video) {
          let videoInfo = {
            url: res.video.videoId, //视频id
            realUrl: res.video.videoMp4 ? res.video.videoMp4 : res.video.convertM3u8 //视频路径
          };
          this.uploadVideoList.push(videoInfo);
        }
        if (res.audio) {
          this.playAduioSrc = res.audio.audioUrl ? res.audio.audioUrl : res.audio.audioM3u8 ? res.audio.audioM3u8 : res.audio.audioM4a //音频路径
          this.allTime = res.audio.duration || 0 //音频时长
          if (res.audio.audioName) {
            this.audioObj = {
              url: this.playAduioSrc,
              audioName: res.audio.audioName
            }
          }
        }
      })
    },
    //分享
    wechatShare: function () {
      let shareDesc = this.info.shareWords ? this.info.shareWords : `点击查看，马上参与${this.info.name}`;
      let shareUrl = `${window.location.href.split("#")[0]}#/homePage/voting/votingActivity?id=${this.voteId}&refereeId=${localStorage.getItem("userId")}`;
      let shareImg = this.info.shareImg ? this.info.shareImg : this.info.cover
      let title = this.info.shareTitle ? this.info.shareTitle : '票选活动，火热进行中！'
      utilJs.wechatConfig(
        shareUrl,
        title,
        shareImg,
        shareDesc,
        function () { },
        true
      );
    },
    //手机端分享
    appShare: function () {
      let title = this.info.shareWords ? this.info.shareWords : this.info.shareTitle ? this.info.shareTitle : '票选活动，火热进行中！'
      let shareImg = this.info.shareImg ? this.info.shareImg : this.info.cover
      let shareDesc = `点击查看，马上参与${this.info.name}`;
      let shareUrl = `${window.location.href.split("#")[0]}#/homePage/voting/votingActivity?id=${this.voteId}&refereeId=${localStorage.getItem("userId")}`;
      let shareData = {
        title: title,
        shareImg: shareImg,
        shareUrl: shareUrl,
        shareDesc: shareDesc
      };
      utilJs.appShareTrue(
        shareData.title,
        shareData.shareImg,
        shareData.shareUrl,
        shareData.shareDesc
      );
    },
  },
  activated() {
    // 初始化页面数据
    setDocumentTitle("在线报名");
    this.voteId = this.$route.query.id
    this.fromPage = this.$route.query.fromPage || 0
    this.playerId = this.$route.query.playerId || 0
    uploader = null;
    this.playAduioSrc = ''
    this.allTime = 0
    this.isOnlineEnroll = 2
    this.playerName = ''
    this.playerDetail = ''
    this.playerPhone = ''
    this.uploadVideoList = []
    this.uploadImgList = []
    this.imgData = ''
    this.article = ''
    this.oldLink = ''
    this.showAudioRecordModal = false
    this.showProgress = false
    this.uploadProgress = '0';
    this.showVideo = false
    this.isWeiXin = utilJs.isWeiXin();
    this.voteMb = localStorage.getItem('voteMb') ? localStorage.getItem('voteMb') : 1;
    this.isShowBtn = true;
    this.audioOpenModal = false;
    this.audioObj = null;
    this.getVoteDetail()
    //获取阿里云签名，除了微信浏览器以外
    if (!utilJs.isWeiXin()) {
      utilJs.getAliSign(`${global.apiurl}imageSign`, (res) => {
        this.imgData = res;
      });
    }
    utilJs.toPageScrollTop()
  },
  deactivated() {
    uploader && uploader.cancel();
  },
}
</script>

<style scoped>
div {
  moz-user-select: -moz-none;
  -moz-user-select: none;
  -o-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.inp-shaw {
  box-shadow: 0px -5px 20px 0px rgba(0, 0, 0, 0.05);
}
.upload-lh {
  line-height: 0.4rem;
}
.maxh340 {
  max-height: 8.5rem;
}
.closeC {
  top: -0.3rem;
  right: -0.3rem;
}
.closeA {
  top: -0.5rem;
  right: -0.1rem;
}
.mt26 {
  margin-top: 0.65rem;
}
.mb2-center-bg {
  background-image: url("../../../assets/i/wap/voting/bgCenter.png");
  background-size: 100%;
}
.mb2-btnBg {
  background-image: url("../../../assets/i/wap/voting/mb2but.png");
  background-repeat: no-repeat;
  background-position: center;
  line-height: 4rem;
  background-size: 45%;
}
.mb3-index-bgColor {
  background-color: #723bee;
}
.mb3-btnBg {
  background-image: url("../../../assets/i/wap/voting/mb3Btn.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 40%;
}
.fc844813 {
  color: #844813;
}
textarea {
  resize: none;
}
</style>